<template>
  <el-card :header="type === 'like'?'我的收藏':'阅读记录'">
  <div style="display: flex">
    <el-card style="margin: 10px" v-for="item in dataList" :key="item.id" :body-style="{ padding: '0px',width:'200px',height:'300px',backgroundColor:'white' }">
      <img :src="baseImage+item.book.cover" style="display: block;width: 100%;height: 200px;">
      <div style="padding: 14px;">
        <h4 style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.book.bookName">
          <router-link v-if="item.book.status === 1" class="link" :to="'book/detail/'+item.book.bookId">{{ item.book.bookName }}</router-link>
          <span v-else>{{item.book.bookName}}</span>
        </h4>
        <div style="margin-top: 10px;display: flex;justify-content: space-between">
          <div>
            <el-tag type="danger" v-if="item.book.status === 2">已下架</el-tag>
            <template v-else>
              <el-tag v-if="item.book.bookStatus === 1" type="warning">连载中</el-tag>
              <el-tag v-else type="success">已完结</el-tag>
            </template>
          </div>
          <div>
            <el-button type="text" v-if="type === 'like'" @click="removeLike(item.book.bookId)">移出收藏</el-button>
            <el-button type="text" v-else @click="removeRecord(item.id)">删除记录</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
  </el-card>
</template>
<script>
export default {
  name: 'BookCard',
  props: {
    type: {
      default: 'like'
    }
  },
  data () {
    return {
      dataList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        total: 0
      },
      baseImage: process.env.VUE_APP_URL
    }
  },
  methods: {
    getDataList () {
      let url = 'api/vip/record/page'
      if (this.type === 'like') {
        url = 'api/vip/like/page'
      }
      this.$http.get(url, this.pageInfo).then(data => {
        if (data) {
          this.dataList = [...data.records]
          this.pageInfo.total = data.total
        }
      }).catch(() => {})
    },
    removeLike (bookId) {
      this.$confirm('确定取消收藏该图书吗?', '提示').then(() => {
        this.$http.post('api/vip/like/save', { bookId }).then(() => {
          this.$message.success('操作成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    },
    removeRecord (id) {
      this.$confirm('确定删除该记录吗？', '提示').then(() => {
        this.$http.delete(`api/vip/record/delete/${id}`).then(() => {
          this.$message.success('操作成功！')
          this.getDataList()
        }).catch(() => {})
      }).catch(() => {})
    }
  },
  created () {
    this.getDataList()
  }
}
</script>

<style scoped lang="scss">
.link{
  color: black;
  text-decoration: none;
  &:hover{
    color: #409EFF;
  }
}
</style>
